<template>
	<view class="logIn-page">
		
		<view class="return" @click="goToLogin"><</view>
		
		<view class="welcome">欢迎注册<br />易上加速器!</view>
			
		<view class="cellphone">
			<image src="../../../static/images/purchase/registerAanAccount/mipmap-xxxhdpi/4.png"></image>
			<input type="number" v-model="mobile" placeholder="请输入手机号">
		</view>
		
		<view class="cellphone">
			<image src="../../../static/images/purchase/registerAanAccount/mipmap-xxxhdpi/1.png"></image>
			<input type="text" v-model="captcha" placeholder="图形验证码">
			<image :src="imageSrc" style="width: 80px; height: 40px;" @click="againCaptcha" alt="图片验证码"></image>
		</view>
		
		<view class="cellphone">
			<image src="../../../static/images/purchase/registerAanAccount/mipmap-xxxhdpi/2.png"></image>
			<input type="number" v-model="sms_code" placeholder="短信验证码">
			<view class="renew">
			    <p @click="sendCod" :disabled="isCountingDown">{{ isCountingDown? countdown +'s' : '获取验证码' }}</p>
			    <!-- <span v-if="isCountingDown">{{ countdown }}</span> -->
			</view>
		</view>
		
		<view class="cellphone">
			<image src="../../../static/images/purchase/registerAanAccount/mipmap-xxxhdpi/3.png"></image>
			<input type="password" v-model="password" placeholder="请输入8—20位密码">
		</view>
		
		<checkbox-group @change="handleCheckboxChange">
			<checkbox  class="agreement" activeBorderColor="#318BED" iconColor="#318BED">
				登录代表同意&nbsp;<a>《使用条款》</a>&nbsp;<a>《隐私政策》</a>
			</checkbox>
		</checkbox-group>
		
		<view class="securityManual">
			<p>请合法使用本软件，提高防诈意识，保护财产安全，点击查看<a href="#">《安全手册》</a></p>
		</view>
		
		<view v-if="errorMessage" class="error-message">{{errorMessage}}</view>
		
		<view class="logLn" @click="register">
			注册
		</view>
		
		<view class="forget">
			<a href="#">没有收到验证码?</a>
		</view>
		
		
	</view>
</template>

<script setup>
    import { ref, onMounted } from 'vue';
    import { apiRegister, apiSendCode, apiCaptcha } from '@/api/register.js';

    // 为每个属性创建响应式数据
    const mobile = ref(''); //手机号
    const captcha = ref(''); // 输入的图片验证码
    const sms_code = ref(''); // 短信验证码
    const password = ref(''); // 密码
	const imageSrc = ref(''); // 图片验证码
	const captchaData = ref(null); // 存储从后端获取的包含图片数据的完整响应数据
    const key = ref(''); // 密钥
	const isAgreeTerms = ref(false); // 是否同意使用条款
	const errorMessage = ref(''); // 展示错误提示信息
	const isCountingDown = ref(false); // 是否正在倒计时
	const countdown = ref(60); // 倒计时剩余秒数

	// 在页面加载完成后调用apiCaptcha获取数据并赋值给captchaData
	onMounted(async () => {
		againCaptcha();
	});
	
	const againCaptcha = async() =>{
		try {
		    const res = await apiCaptcha();
		    captchaData.value = res.data;
			imageSrc.value= captchaData.value.img;
		} catch (error) {
		    console.error('获取图形验证码数据失败：', error);
		}
	}
	
	// 定义选择框状态改变的事件处理函数
	const handleCheckboxChange = (event) => {
	    if (isAgreeTerms.value === false) {
	        isAgreeTerms.value = true;
	    } else {
	        isAgreeTerms.value = false;
	    }
	    console.log('使用条款的勾选状态改变');
	};
	
	// 获取短信验证码
    const sendCod = async () => {
        try {
             // 检查必填项是否填写完整的手机号
             if (!mobile.value || mobile.value.length !== 11) {
                 throw new Error('请填写正确的手机号');
             }
			 // 检查图形验证码是否填写完整
			 if (!captcha.value) {
			     throw new Error('请填写图形验证码');
			 }
	
            // 调用获取短信验证码
            const res = await apiSendCode({
                mobile: mobile.value,
                captcha: captcha.value,
                key: captchaData.value.key,
            });
			
			console.log('手机号',mobile.value);
			console.log('图形验证码',captcha.value);
			// console.log('密钥',captchaData.value.data.key);
			console.log('短信验证码',res.data);
			errorMessage.value = ''; // 提示设为空
			console.log('接口返回的完整数据：', res);
			
			if (res.code === 1) {
			    // 添加其他成功提示的逻辑
			    console.log('获取验证码成功');
			} else {
			    // 添加显示错误提示信息的逻辑
			    console.error('获取验证码失败：', res.message);
			}
			
			// 设置为正在倒计时，并启动倒计时
			isCountingDown.value = true;
			const timer = setInterval(() => {
			    countdown.value--;
			    if (countdown.value === 0) {
			        clearInterval(timer);
			        isCountingDown.value = false;
			        countdown.value = 60;
			    }
			}, 1000);
        } catch (error) {
            console.error('获取验证码过程中出现错误：', error.message);
			errorMessage.value = error.message;
        }
    };

    // 注册方法
    const register = async () => {
        try { 
            // 检查必填项是否填写完整
            if (!mobile.value ||!sms_code.value ||!password.value) {
                throw new Error('请填写完整的注册信息');
            }
			if (password.value.length < 8 || password.value.length > 12) {
				throw new Error('请填写8 - 12位密码');
			}
			// 检查是否同意使用条款
			if (isAgreeTerms.value === false) {
			    throw new Error('请同意使用条款后再注册');
			}

            // 调用注册API函数，发送注册请求
            const res = await apiRegister({
                mobile: mobile.value,
                sms_code: sms_code.value,
                password: password.value,
            });
			
			console.log('手机号',mobile.value);
			console.log('输入的验证码',sms_code.value);
			console.log('输入的密码',password.value);
			console.log('接口返回的完整数据：', res);

            // 根据后端返回结果处理成功或失败情况
            if (res.code) {
				// 添加其他成功提示的逻辑
                console.log('注册成功');
				errorMessage.value = '';
				uni.navigateBack({
				    delta: 1,
				    animationType: 'pop-out',
				    animationDuration: 1000,
				})
            } else {
				// 添加显示错误提示信息的逻辑
                console.error('注册失败：', res.msg);
				errorMessage.value = res.msg;
            }
		} catch (error) {
			// 添加显示错误提示信息的逻辑
            console.error('注册过程中出现错误：', error.message);
			errorMessage.value = error.message;
		}
    };
	
	
    // 返回上一页
    const goToLogin = () => {
        uni.navigateBack({
            delta: 1,
            animationType: 'pop-out',
            animationDuration: 1000,
        })
    }
</script>

<style lang="scss" scoped>

	// 背景
.logIn-page {
	background-image: url('../../../static/images/purchase/registerAanAccount/mipmap-xxxhdpi/5.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100vw;
	height: 100vh;
	position: relative;
	padding-top: 80px;
}

	// 返回
.return{
	position: absolute;
	left: 30px;
	top: 40px;
	font-size: 30px;
	color: #ffffff;
	// font-weight: bold;
}

.welcome{
	width: 85%;
	margin: 0 auto;
	font-size: 35px;
	font-weight: 600;
	margin-bottom: 50px;
	// background-color: #55ffff;
}

.cellphone{
	width: 85%;
	height: 50px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	margin-top: 20px;
	border-bottom: #E6F0F5 solid 1px;
	// background-color: #ffaaff;
}

.cellphone image{
	width: 15px;
	height: 20px;
}

.cellphone input{
	margin-left: 10px;
}

.forget{
	width: 79%;
	height: 50px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: wrap;
	font-size: 15px;
	// background-color: #aaffff;
}

.agreement{
	display: flex;
	margin: 0 auto;
	width: 80%;
	font-size: 13px;
	margin-top: 20px;
	margin-bottom: 10px;
	// background-color: #aaff00;
}

.securityManual{
	display: flex;
	margin: 0 auto;
	width: 80%;
	height: 50px;
	font-size: 13px;
	// margin-bottom: 20px;
	// background-color: #aaff00;
	padding-left: 30px;
}

	// 提示信息
.error-message{
	display: flex;
	margin: 0 auto;
	width: 80%;
	font-size: 15px;
	padding-left: 30px;
	color: #ff0000;
	// background-color: #55ffff;
	animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	animation-iteration-count: 1;
}

a {
	text-decoration: none;
	color: #318BED;
}

.logLn{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 20px;
	width: 80%;
	height: 50px;
	margin: 0 auto;
	margin-top: 20px;
	background-color: #F4F7F9;
	border-radius: 50px;
	background: linear-gradient(to right, #3AACFF, #635CFF);
}

	// 获取验证码
.renew{
	// margin-right: 30px;
	height: 30px;
	width: 80px;
	border-radius: 15px;
	border: 1px solid #318BED;
	// background-color: #55ffff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 15px;
	color: #318BED;
}

</style>
